<template>
	<MyPage title="优惠券" :isback="true">
		<!-- <view slot="right">优惠券说明</view> -->
		<view slot="gBody">
			<u-tabs-swiper ref="tabs" active-color="#e9a81e" :is-scroll="false" :current="current" :list="typeList"></u-tabs-swiper>
			<view class="bill-box">
				<view
					class="bill-list"
					v-for="item in dataList"
					:key="index"
					:class="{'grey-box':item.state!=1}"
				>
					<view class="bill-price">
						￥<text>{{item.price}}</text>
					</view>
					<view class="bill-text">
						<view class="title">{{item.title}}</view>
						<view class="grey">有效期至{{item.date}}</view>
					</view>
					<view class="bill-grey-btn" v-if="item.state==2">已使用</view>
					<view class="bill-grey-btn" v-else-if="item.state==3">已过期</view>
					<view class="bill-btn" v-else><u-button size="mini" type="warning" shape="circle">立即使用</u-button></view>
				</view>
			</view>
			<u-loadmore :status="status" class="loadmore-box" />
		</view>
	</MyPage>
</template>		

<script>
import mixin from "@/libs/mixin.js";
export default {
	mixins: [mixin],
	data() {
		return {
			current: 0,
			typeList: [{
				name: '未使用'
			}, {
				name: '已使用'
			}, {
				name: '已过期'
			}],
			dataCount: 0,
			dataList: [
				{price:5,title:'2022活动会员优惠券',date:'2022-05-10',state:1},
				{price:50,title:'2022活动会员大额优惠券，特定用户',date:'2022-05-10',state:1},
				{price:20,title:'2022活动会员优惠券',date:'2022-05-10',state:2},
				{price:100,title:'2022活动会员优惠券',date:'2022-05-10',state:3},
				{price:50,title:'2022活动会员优惠券',date:'2022-05-10',state:1}
			], 
			status: '加载更多'
		} 
	},
	onLoad() {
		if(!this.$store.state.app.token){
			this.$utils.redirectTo('/pages/login/login',{
				title:"登录",
				subTitle:"请先登录",
				btnValue:"请先登录",
				url:'/login/login'
			});
		}else{
			this.getData();
		}
	}, 
	methods: {
		// 获取数据
		getData(){
			setTimeout(() => {
				let arr = [];
				uni.request({
					url: 'http://www.txzh.com.cn/api.php?app=Default&act=getBill',  
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'X-Requested-With': 'xmlhttprequest'
					},
					data:{
						token:this.$store.state.app.token,
						page:this.query.page,
						ctime:this.query.date,
						type:this.query.type,
						token:this.$store.state.app.token
					},
					success: res => {
						for( var i=0; i<res.data.total2; i++){
							arr.push(res.data.list[i]); 
						};
						this.billList.push(...arr);
						this.dataCount = res.data.total; //总条数
						if(this.query.page >= res.data.totalpage) this.status = 'nomore'; //总页数
						else this.status = 'loading';
					},  
					fail: () => {},  
					complete: () => {}  
				});  
			}, 2000);
		}
	},
	// 下拉加载更多
	onReachBottom() {
		console.log(this.query.page)
		console.log(Math.round(this.dataCount/this.query.limit))
		if( this.query.page > Math.round(this.dataCount/this.query.limit) ) return;
		this.status = 'loading';
		this.query.page = ++this.query.page;
		this.getData();
	}
}
</script>

<style lang="scss">
page{
	background:#f3f3f3;
}
</style>
<style lang="scss" scoped>
.query{
	position: fixed;
	left:0;
	top: 88rpx;
	width: 100%;
	padding:30rpx 0 30rpx 35rpx;
	background: #f3f3f3;
	overflow: hidden;
	font-size:22rpx;
	text{
		float: left;
		margin-right:60rpx;
		/deep/ .u-icon{
			margin-left:10rpx;
			color:#aaa;
		}
	}
}
.bill-box{
	padding:20rpx 40rpx;
	.bill-list{
		margin-top:20rpx;
		position: relative;
		display: flex;
		justify-content: space-between;
		border-bottom:1px #eee solid;
		background: #fff;
		&:before,&:after{
			content:'';
			display: block;
			position:absolute;
			top:50%;
			width:50rpx;
			height:50rpx;
			background:#f3f3f3;
			border-radius: 25rpx;
			transform: translateY(-50%);
		}
		&:before{
			left:-25rpx;
		}
		&:after{
			right:-25rpx;
		}
		.bill-price{
			position: relative;
			width:180rpx;
			height:180rpx;
			line-height:180rpx;
			color:#e9a81e;
			font-weight: bold;
			text-align: center;
			font-size:30rpx;
			text{
				font-size:60rpx;
			}
		}
		.bill-text{
			flex: 1;
			margin-top:30rpx;
			.title{
				font-size:30rpx;
				line-height:1.2em;
				max-height:70rpx;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.grey{
				margin-top:15rpx;
				font-size:22rpx;
				white-space: nowrap;
			}
		}
		.bill-btn,.bill-grey-btn{
			width:200rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			/deep/ .u-size-mini{
				font-size:20rpx;
				padding:0 16rpx;
			}
		}
		.bill-grey-btn{
			margin:28rpx 40rpx 0;
			width:120rpx;
			height:120rpx;
			border:1px #ddd solid;
			border-radius: 50%;
			transform: rotate(-30deg);
		}
	}
	.grey-box{
		color:#aaa;
		.bill-price{
			color:#aaa;
		}
	}
}
.loadmore-box{
	padding:12rpx 0;
}
</style>